<template>
	<view class="fund-page">
		<quill-editor disabled v-model="describe" class="ql-editor" />
		<view class="list">
			<form class="form-list">
				<view class="label-input" v-for="(item, index) in list" :key="index">
					<text class="titel">{{ item.projectName }}</text>
					<view class="btn">
						<button size="mini" @click="jumpDetails(item.fundId)">查看详情</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import api from "api/modules/jinrong.js";
	
	export default {
		name: "Fund",
		data() {
			return {
				describe: "",
				pageParams: {
					pageSize: 1000,
					pageNum: 1,
				},
				list: [],
			};
		},
		mounted() {
			api
				.getFrontDetail({
					associationServiceId: 4,
				})
				.then((res) => {
					this.describe = res.data.serviceContent;
				});

			this.getData();
		},
		methods: {
			getData() {
				api.getServiceFundPage(this.pageParams).then((res) => {
					this.list = res.data;
				});
			},
			jumpDetails(id) {
				uni.navigateTo({
					url: `FundDetail?fundId=${id}`,
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	page {
		background-color: #f6f6f6;
	}

	.fund-page {
		margin-top: 30rpx;

		.ql-editor {
			background-image: url(../../../../static/fund-bgc.jpg);
			background-size: contain;
			background-repeat: repeat;
		}

		.list {
			padding: 24rpx;

			.form-list {
				.label-input {
					display: flex;
					background-color: #fff;
					justify-content: space-between;
					// min-height: 90rpx;
					padding: 20rpx;
					align-items: center;
					border-bottom: 1rpx solid #f6f6f6;



					.titel {
						display: inline-block;
						width: 70%;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
					}

					.btn {
						flex: auto;

						uni-button {
							padding: 0;
							width: 144rpx;
							height: 50rpx;
							background-color: #0B4E9E;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
